import { useEffect, useState } from "react";

import Particles, { initParticlesEngine } from "@tsparticles/react";
import { loadFull } from "tsparticles";

const ParticlesComponent = () => {
  // 使用状态变量`init`控制粒子组件的显示
  const [init, setInit] = useState(false);

  // 使用`useEffect`钩子，在组件挂载时初始化粒子引擎
  useEffect(() => {
    initParticlesEngine(async (engine: any) => {
      // 加载粒子引擎的简化配置
      await loadFull(engine);
    }).then(() => {
      setInit(true);
    });
  }, []);
  // 当粒子容器加载完毕时的回调
  const particlesLoaded: any = (container: any) => {
    console.log(container);
  };

  // 定义粒子效果的配置项
  const options = {
    // 背景配置项
    background: {
      color: {
        // 藏青色

        value: "#2d3a4b", // 背景颜色
      },
    },
    fpsLimit: 200, // 帧率限制，即每秒最多渲染的帧数
    // 交互行为配置项
    interactivity: {
      events: {
        // 鼠标点击时的交互行为
        onClick: {
          enable: true,
          mode: "push", // "push"表示推动生成粒子，"remove"表示移除粒子
        },
        // 鼠标悬停时的交互行为
        onHover: {
          enable: true,
          mode: "grab", // "repulse"表示粒子互相排斥
        },
        // 窗口大小改变时的交互行为
        resize: true,
      },
      modes: {
        // 点击时的粒子生成模式配置
        push: {
          quantity: 4, // 生成的粒子数量
        },
        // 鼠标悬停时的粒子排斥模式配置
      },
    },
    // 粒子配置项
    particles: {
      color: { value: "#ffffff" }, // 粒子颜色
      links: {
        color: "#ffffff",
        distance: 150, // 粒子之间链接的距离
        enable: true,
        opacity: 0.4, // 链接的不透明度
        width: 1, // 链接的宽度
        stroke: {
          color: "#000000",
          width: 1,
        },
      },
      move: {
        direction: "none",
        enable: true,
        outModes: {
          default: "bounce", // 粒子运动到边界时的反弹效果
        },
        random: false,
        speed: 2, // 粒子的运动速度
        straight: false, // 粒子是否直线运动
      },
      number: {
        density: {
          enable: true,
          area: 800, // 粒子生成的区域面积
        },
        value: 120, // 粒子的总数量
      },
      opacity: {
        value: 0.7, // 粒子的不透明度
      },
      shape: { type: "circle" }, // 粒子的形状，默认为圆形
      size: {
        value: { min: 1, max: 5 }, // 粒子的大小范围
      },
    },

    detectRetina: true, // 是否在高分辨率设备上启用更高质量的图像
  } as any;

  // 当`init`为`true`时，渲染粒子效果组件
  return (
    init && (
      <Particles id='particles-id' particlesLoaded={particlesLoaded} options={options} className='ParticlesStyle' />
    )
  );
};

export default ParticlesComponent;
